<template>
    <div>
        <el-row>
            <el-col>
                <el-card>
                    <ve-histogram :data="chartData"></ve-histogram>
                </el-card>
            </el-col>
            <el-col>
                <el-card>
                    <ve-histogram :data="chartData2" :settings="chartSettings"></ve-histogram>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-card>
                    <ve-histogram :data="chartData3" :settings="chartSettings2"></ve-histogram>
                </el-card>
            </el-col>
            <el-col>
                <el-card>
                    4
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            this.chartSettings = {
                axisSite: {right: ['下单率']},
                yAxisType: ['KMB', 'percent'],
                yAxisName: ['数值', '比率']
            };
            this.chartSettings2 = {
                stack: {'用户': ['访问用户', '下单用户']}
            };
            return {
                chartData: {
                    columns: ['日期', '访问用户', '下单用户', '下单率'],
                    rows: [
                        {'日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32},
                        {'日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26},
                        {'日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76},
                        {'日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49},
                        {'日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
                        {'日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78}
                    ]
                },
                chartData2: {
                    columns: ['日期', '访问用户', '下单用户', '下单率'],
                    rows: [
                        {'日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32},
                        {'日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26},
                        {'日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76},
                        {'日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49},
                        {'日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
                        {'日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78}
                    ]
                },
                chartData3: {
                    columns: ['日期', '访问用户', '下单用户', '下单率'],
                    rows: [
                        {'日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32},
                        {'日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26},
                        {'日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76},
                        {'日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49},
                        {'日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
                        {'日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78}
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>